<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset='utf-8' />
<script
   type="text/javascript"
   src="http://ditu.google.cn/maps/api/js?sensor=true&libraries=places,geometry&language=zh-CN"> 
</script> 
<script type="text/javascript"> 
  var map, searchservice, infowindow;
  var  markers = [];
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'));
    map.setCenter(new google.maps.LatLng(39.989139,116.402314));
    map.setZoom(15);
    map.setMapTypeId('roadmap');

    infowindow = new google.maps.InfoWindow();
    searchservice = new google.maps.places.PlacesService(map);

    var input = document.getElementById('target');
    var control = new google.maps.places.Autocomplete(input);

    google.maps.event.addListener(control, 'place_changed', function() {
      var place = control.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
    });

    google.maps.event.addListener(map, 'bounds_changed', function() {
      var bounds = map.getBounds();
      control.setBounds(bounds);
    });
  }

    var render = function() {
      var location = map.getCenter();
      var radius = google.maps.geometry.spherical.computeDistanceBetween(map.getCenter(), map.getBounds().getNorthEast()) / 3;
      search(location, radius);
    };
 
  function search(loc, rad) {
    searchservice.search({
      location: loc,
      radius: rad }, function(res, status) {

      for(var i=0; i<markers.length; i++){
        markers[i].setMap(null);
      }
      markers = [];

    var td = document.getElementById("root");
    while (td && td.childNodes.length) {
      td.removeChild(td.childNodes[0]);
    }
 
    for (i = 0; i < res.length; ++i) {
      var marker = new google.maps.Marker({
        map: map,
        position: res[i].geometry.location,
        draggable: false,
        title: res[i].name,
        icon: new google.maps.MarkerImage(res[i].icon,
                                          null, null, null,
                                          new google.maps.Size(24,24))           
      });
      markers.push(marker);

      var div = document.createElement("div");
      div.style.border = "hidden 0px";
      div.style.height = "30px";
      div.style.width = "232px";
      div.style.textOverflow = "ellipsis";
      div.style.overflow = "hidden";
      div.style.whiteSpace = "nowrap";
      div.style.margin = "1px";
      div.style.padding = "2px";
      div.style.backgroundColor = (i%2) ? "white" : "#eeeeee";
      div.innerHTML = '<table><tr style="vertical-align: middle; cursor:pointer;"><td><img src="' + res[i].icon + '" style="width:24px;"></td><td style="width:100px;">' + res[i].name + ', ' + (res[i].vicinity || '') + '</td></tr></table>';
      div.onclick = makeFunc([res[i].reference, marker], function(ref) { clicked(ref); });
      td.appendChild(div);
    }
  });
  }

function makeFunc(arg, func) {
 return function() { func(arg); };
}

function clicked(ref) {
 searchservice.getDetails({reference: ref[0]}, function(res, status) {
      infowindow.close();
      infowindow.setContent(
          '<table style="font-size:12px; padding: 2px;"><tr  style="vertical-align:middle;"><td>'
          + '<img src="' + res.icon + '" style="width:48px;"></td><td>'
          + '<br><a href="' + res.url + '">' + res.name + '</a>' 
          + '<br>' + (res.formatted_address || '')
          + '<br>' + (res.formatted_phone_number || '')
	  + '</td></tr></table>'
);
      infowindow.open(map, ref[1]);
 });
}
</script> 
</head> 
<body onload="initialize()" style="margin:0; background-color:#F0F0F0;"> 
  <table style="background-color:white; margin:0"> 
  <tr><td style="vertical-align:top" colspan="2"> 
  <input id="target" type="text" style="width:494px;"> 
  </td>
  <tr>
  <td>
    <div id="map" style="width:500px; height:385px;"> 
  </td>
  <td style="width:252px; height:360px; overflow:hidden;">
    <input type=submit style="width:252px; height:20px;" value='搜索' onclick="render();">
      <div id="root" style="width:252px; height:361px; overflow:auto; margin-top:5px;">
  </td>
  </tr></table> 
</body> 
</html> 
